<template>
    <div class="main">
      <div class="head">
          <p><span>￥</span>{{remainPar}}</p>
      </div>
      <div class="content">
        <div class="contentbox">
          <h3>{{name}}</h3>
          <p class="date">有效期至:{{availableDate}}</p>
          <div class="shop">
            <p>适用门店:</p>
            <p>{{couponChannel}}</p>
          </div>
          <div class="intro">
            <p>商品简介:</p>
            <p>使用丝芙兰现金抵用券,就需要到丝芙兰网站中选购商品,并将商品添加至购物车中,进入我的过后无车页面.</p>
          </div>
        </div>
      </div>
      <!--下面开始是底部按钮-->
      <div class="button" v-if="num == 0">
        <a @click="prop=1">
          <img src="../../img/diyong-5.png" alt="">
          <p>转赠好友</p>
        </a>
        <a>立即使用</a>
      </div>
      <!--<div class="button1" v-if="num == 1">-->
        <!--<a>已使用</a>-->
      <!--</div>-->
      <!--<div class="button2" v-if="num == 2">-->
        <!--<a>已失效</a>-->
      <!--</div>-->
      <!--下面是弹窗-->
      <div class="prop1" v-if="prop==1">
        <div class="propcon">
            <p>点击页面右上角 <br>
              分享此页面，即可转赠抵用券 <br>
              仅限非会员领取使用</p>
          <a @click="prop=0">确定</a>
        </div>
      </div>
      <!--<div class="prop2" v-if="prop==2">-->
        <!--<div class="propcon">-->
          <!--<p>恭喜,领取成功!</p>-->
          <!--<a href="#">确定</a>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="prop3" v-if="prop==3">-->
        <!--<div class="propcon">-->
          <!--<p>抱歉,领取失败!<br>本券仅限非会员领取</p>-->
          <!--<a href="#">确定</a>-->
        <!--</div>-->
      <!--</div>-->
      <div class="prop4" v-if="prop==4">
        <div class="propcon">
          <a>+</a>
        </div>
      </div>
      <PulseLoader v-if="loading==true"  :size="size" :color="color"></PulseLoader>
    </div>
</template>

<script>
  import {
    baseUrl,auth,myUrl,
  } from "@/assets/public"
  import wx from 'weixin-js-sdk';
  import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
  export default {
        name: 'main',
        data() {
            return {
              result:"",
              loading:true,
              size:".5rem",
              color:"#333",
              num:0,
              prop:0,
              encrypted:"",
              couponChannel:"",
              availableDate:"",
              name:"",
              remainPar:"",
              shareTitle:"爱拼才美丽",
              lineLink:"",
              imgUrls:myUrl+"/static/img/share.png",
              descContent:"美颜·美体·健康",
            }
        },
        created() {
          auth();
        },
        mounted() {
          var that =this;
          var couponno = that.$route.query.couponno;
          //微信分享
          if(couponno == undefined){
            that.$router.push({path:myUrl+"/notfound"})
          }
          $.ajax({
            type: 'GET',
            url: baseUrl + '/api/cpinfo/'+couponno,
            data: {
              "openid":localStorage.openid,
            },
            dataType: 'json',
            success: function (res) {
              console.log(res);
              if (res.status == 200) {
                that.availableDate=res.data.info.availableDate.substr(0,10);
                that.couponChannel=res.data.info.couponChannel;
                that.remainPar=res.data.info.remainPar;
                that.name=res.data.info.name;
                that.results = res.data.wxjsapi;
                that.encrypted = res.encrypted;
                that.loading=false;
                that.lineLink=myUrl+"/donation?encrypted="+that.encrypted;

                that.wechatShare();

              }
            }
          });
        },
        methods: {
          wechatShare(){
            let that = this;
            wx.ready(function (){
              wx.onMenuShareTimeline({
                title: that.shareTitle, // 分享标题
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareAppMessage({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {

                },
                cancel: function () {}
              });
              wx.onMenuShareQQ({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareWeibo({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户取消分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareQZone({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户取消分享后执行的回调函数

                },
                cancel: function () {}
              });
            })
          },

        },
        components: {
          PulseLoader,
        }
    }
</script>

<style scoped>
  .main {
    min-height:100vh;
    background: url("../../img/bg1.png") center center repeat;
    overflow: hidden;
  }
  .head {
    width: 100%;
    height: 2.6rem;
    background: url("../../img/diyong-2.png") center center no-repeat;
    background-size:cover;
    margin-top:.5rem;
    position: relative;
    z-index:10;
  }
  @font-face {
    font-family: "pis";
    src: url("../../css/BanksScript.otf");
  }
  .head p {
    width: 100%;
    height: 2.6rem;
    line-height:2.6rem;
    text-align: center;
    font-family:pis;
    color:#666;
    font-size: 1.5rem;
  }
  .head p span {
    font-style: italic;
    font-size:.6rem;
  }
  .content {
    width: 90%;
    height:auto;
    border:1px solid #000;
    margin:0 auto;
    padding:.2rem;
    box-shadow: .5px .5rem 2rem rgba(227,224,221,1) inset;
    margin-top:-.75rem;
  }
  .content .contentbox {
    width: 100%;
    height:auto;
    padding-bottom:1rem;
  }
  .content h3 {
    width: 94%;
    height:1rem;
    line-height:1rem;
    margin:0 3%;
    border-bottom:1px solid #dddddd;
    text-align: center;
    font-size:.46rem;
    font-weight:normal;
    margin-top:1rem;
  }
  .content p.date {
    width: 94%;
    height:1.4rem;
    line-height:1.4rem;
    margin:0 3%;
    border-bottom:1px solid #dddddd;
    text-align: center;
    font-size:.4rem;
  }
  .content .shop,.content .intro {
    width: 94%;
    margin:0 3%;
    font-size:.4rem;
    line-height:.6rem;
    color: #666666;
    margin-top:.5rem;
    display: flex;
    justify-content: flex-start;
  }
  .content .shop p:first-child {
    width: 25%;
  }
  .content .shop p:last-child {
    width: 70%;
  }
  .content .intro p:first-child {
    width: 25%;
  }
  .content .intro p:last-child {
    width: 70%;
  }


  .button {
    width: 100%;
    height:auto;
  }
  .button a {
    display: flex;
    justify-content: center;
    align-items:center;
    margin:0 auto;
    width: 50%;
    height:1.2rem;
    margin-top:.5rem;
    font-size:.4rem;
  }
  .button a:first-child {
    background: #fff6de;
  }
  .button a:first-child img {
    margin-right:.2rem;
  }
  .button a:first-child p {
    color: #666666;
  }
  .button a:last-child {
    background: linear-gradient(50deg,#666666,#fff5dd);
    color: #fff;
  }


  .button1 a {
    display: flex;
    justify-content: center;
    align-items:center;
    margin:0 auto;
    width: 50%;
    height:1.2rem;
    margin-top:1rem;
    font-size:.4rem;
    background: #cacaca;
    color: #fff;
  }
  .button2 a {
    display: flex;
    justify-content: center;
    align-items:center;
    margin:0 auto;
    width: 50%;
    height:1.2rem;
    margin-top:1rem;
    font-size:.4rem;
    background: #cacaca;
    color: #fff;
  }

  .prop1 {
      width: 100%;
      height:100vh;
      background: rgba(76,76,76,.7);
      position: fixed;
      top:0;
      left:0;
      z-index:9999999;
    }
  .prop1 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop1.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
    overflow: hidden;
  }
  .prop1 .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.32rem;
    line-height:.5rem;
    color: #333333;
    margin-top:5.2rem;
  }
  .prop1 .propcon a {
    display: block;
    width: 2.4rem;
    height:1rem;
    line-height:1rem;
    text-align: center;
    font-size:.4rem;
    border:1px solid #333333;
    margin:0 auto;
  }

  .prop2 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop2 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop2.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .prop2 .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.32rem;
    line-height:.5rem;
    color: #333333;
    margin-top:5.2rem;
  }
  .prop2 .propcon a {
    display: block;
    width: 2.4rem;
    height:1rem;
    line-height:1rem;
    text-align: center;
    font-size:.4rem;
    border:1px solid #333333;
    margin:0 auto;
  }


  .prop3 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop3 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop3.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .prop3 .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.32rem;
    line-height:.5rem;
    color: #333333;
    margin-top:4.8rem;
  }
  .prop3 .propcon a {
    display: block;
    width: 2.4rem;
    height:1rem;
    line-height:1rem;
    text-align: center;
    font-size:.4rem;
    border:1px solid #333333;
    margin:0 auto;
  }



  .prop4 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop4 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop4.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .prop4.propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.32rem;
    line-height:.5rem;
    color: #333333;
    margin-top:5.2rem;
  }
  .prop4 .propcon a {
    display: block;
    width: .8rem;
    height:.8rem;
    line-height:.8rem;
    text-align: center;
    font-size:1rem;
    border:1px solid #333333;
    margin:0 auto;
    margin-top: 7rem;
    transform: rotate(45deg);
  }

  .v-spinner {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: #fff;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }
</style>
